CSS மாறிகள்: உலகளாவிய வலை வடிவமைப்பிற்கான தனிப்பயன் பண்பு வரையறை மற்றும் வரம்பில் தேர்ச்சி பெறுதல்

வலை மேம்பாட்டின் எப்போதும் மாறிவரும் நிலப்பரப்பில், செயல்திறன், பராமரிப்புத்திறன் மற்றும் நிலைத்தன்மை ஆகியவை மிக முக்கியமானவை. CSS மாறிகள், அதிகாரப்பூர்வமாக தனிப்பயன் பண்புகள் என அழைக்கப்படுகின்றன, இந்த இலக்குகளை அடைவதற்கான ஒரு சக்திவாய்ந்த கருவியாக உருவெடுத்துள்ளன. அவை டெவலப்பர்களை மீண்டும் பயன்படுத்தக்கூடிய மதிப்புகளை வரையறுக்க அனுமதிக்கின்றன, இது ஸ்டைல்ஷீட்களை உலகளாவிய வடிவமைப்புத் தேவைகளுக்கு ஏற்றவாறு மேலும் ஆற்றல்மிக்கதாகவும் மாற்றியமைக்கக்கூடியதாகவும் ஆக்குகிறது. இந்த விரிவான வழிகாட்டி CSS தனிப்பயன் பண்புகளின் நுணுக்கங்களை ஆராயும், அவற்றின் வரையறை, வரம்பின் நுணுக்கங்கள் மற்றும் சர்வதேச வலை மேம்பாட்டிற்கான நடைமுறை பயன்பாடுகளை உள்ளடக்கியது.

CSS மாறிகள் (தனிப்பயன் பண்புகள்) என்றால் என்ன?

அவற்றின் மையத்தில், CSS தனிப்பயன் பண்புகள் குறிப்பிட்ட மதிப்புகளைக் கொண்டிருக்கும் பயனர் வரையறுத்த பண்புகளாகும். நிலையான CSS பண்புகளைப் போலன்றி (color அல்லது font-size போன்றவை), தனிப்பயன் பண்புகளுக்கு நீங்கள் விரும்பும் எந்தப் பெயரையும் இடலாம், பொதுவாக இரண்டு ஹைபன்களுடன் (--) முன்னொட்டுடன், மற்றும் எந்தவொரு செல்லுபடியாகும் CSS மதிப்பையும் வைத்திருக்கலாம். இந்த நெகிழ்வுத்தன்மை கருப்பொருள்கள், வடிவமைப்பு டோக்கன்களை நிர்வகித்தல், மற்றும் குறிப்பாக உலகளாவிய பார்வையாளர்களைக் கொண்ட திட்டங்களுக்கு மிகவும் பராமரிக்கக்கூடிய ஸ்டைல்ஷீட்களை உருவாக்குதல் போன்ற பணிகளுக்கு நம்பமுடியாத அளவிற்கு பல்துறை ஆக்குகிறது.

CSS மாறிகளை வரையறுத்தல்

ஒரு CSS மாறியை வரையறுப்பது நேரடியானது. நிலையான CSS பண்பு தொடரியலைப் பயன்படுத்தி ஒரு தனிப்பயன் பண்பு பெயருக்கு ஒரு மதிப்பை நீங்கள் ஒதுக்குகிறீர்கள். முக்கிய வேறுபடுத்தி -- முன்னொட்டு ஆகும்.

இந்த உதாரணத்தைக் கவனியுங்கள்:

            
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-family-base: Arial, sans-serif;
  --spacing-unit: 1rem;
}

            

              
                Copy
              
            
          

இந்த துணுக்கில், :root என்பது ஆவணத்தின் மூலத்தைக் குறிக்கும் ஒரு சூடோ-கிளாஸ் ஆகும், இது இந்த மாறிகளை உங்கள் ஸ்டைல்ஷீட் முழுவதும் உலகளவில் அணுகக்கூடியதாக ஆக்குகிறது. :root என்பதை காஸ்கேடின் மிக உயர்ந்த மட்டமாக நினைத்துப் பாருங்கள், இது ஒரு நிரலாக்க மொழியில் உலகளாவிய மாறிலிகளை நீங்கள் வரையறுப்பது போன்றது.

பின்னர் நீங்கள் இந்த வரையறுக்கப்பட்ட மாறிகளை மற்ற CSS விதிகளுக்குள் var() செயல்பாட்டைப் பயன்படுத்தி பயன்படுத்தலாம். இந்த செயல்பாடு தனிப்பயன் பண்பு பெயரை அதன் முதல் வாதமாகவும், விருப்பமான பின்னடைவு மதிப்பை அதன் இரண்டாவது வாதமாகவும் எடுத்துக்கொள்கிறது.

            
body {
  font-family: var(--font-family-base);
  color: var(--primary-color);
}

h1 {
  color: var(--primary-color);
  margin-bottom: var(--spacing-unit);
}

.button-secondary {
  background-color: var(--secondary-color);
  padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
}

            

              
                Copy
              
            
          

உங்கள் தனிப்பயன் பண்புகளில் சேமிக்கப்பட்ட மதிப்புகளை அணுகுவதற்கும் பயன்படுத்துவதற்கும் var() செயல்பாடு முக்கியமானது. பின்னடைவு மதிப்பு, சீரான சீரழிவுக்கு அல்லது தனிப்பயன் பண்பு சில காரணங்களுக்காக வரையறுக்கப்படவில்லை என்றாலும் ஒரு ஸ்டைல் பயன்படுத்தப்படுவதை உறுதிசெய்ய விரும்பும்போது குறிப்பாக பயனுள்ளதாக இருக்கும்.

பின்னடைவு மதிப்புகளின் சக்தி

பின்னடைவு மதிப்புகளை வழங்கும் திறன் CSS மாறிகளுடன் பணிபுரியும் போது ஒரு குறிப்பிடத்தக்க நன்மையாகும். இது தற்போதைய வரம்பில் ஒரு தனிப்பயன் பண்பு வரையறுக்கப்படவில்லை என்றாலும் அல்லது அதன் பயன்பாட்டில் எழுத்துப்பிழை இருந்தாலும் உங்கள் ஸ்டைல்கள் செயல்பாட்டில் இருப்பதை உறுதி செய்கிறது. இது சர்வதேச திட்டங்களுக்கு குறிப்பாக பயனளிக்கிறது, அங்கு உலாவி ஆதரவு அல்லது குறிப்பிட்ட ஸ்டைல் மேலெழுதல்கள் மாறுபடலாம்.

            
.card {
  border-color: var(--card-border-color, #ccc);
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், --card-border-color வரையறுக்கப்படவில்லை என்றால், பார்டர் நிறம் #ccc க்கு இயல்புநிலையாக இருக்கும். இந்த முன்கூட்டிய அணுகுமுறை உங்கள் ஸ்டைல்ஷீட்களின் வலிமையை மேம்படுத்துகிறது.

CSS மாறி வரம்பைப் புரிந்துகொள்வது

நிலையான CSS பண்புகளைப் போலவே, CSS மாறிகளும் காஸ்கேடைப் பின்பற்றுகின்றன மற்றும் வரம்பு விதிகளுக்கு உட்பட்டவை. இதன் பொருள் அவற்றின் கிடைக்கும் தன்மை மற்றும் மதிப்பு அவை எங்கே வரையறுக்கப்பட்டுள்ளன மற்றும் எங்கே பயன்படுத்தப்படுகின்றன என்பதைப் பொறுத்து மாறக்கூடும். சிக்கலான ஸ்டைல்ஷீட்களை நிர்வகிப்பதற்கும், எதிர்பாராத ஸ்டைல் முரண்பாடுகளைத் தடுப்பதற்கும், குறிப்பாக பெரிய, கூட்டு சர்வதேச திட்டங்களில் வரம்பைப் புரிந்துகொள்வது மிகவும் முக்கியமானது.

உலகளாவிய வரம்பு (:root)

முன்னர் நிரூபிக்கப்பட்டபடி, :root சூடோ-கிளாஸிற்குள் மாறிகளை வரையறுப்பது அவற்றை உங்கள் ஆவணம் முழுவதும் உலகளவில் கிடைக்கச் செய்கிறது. இது வடிவமைப்பு டோக்கன்கள் அல்லது முதன்மை வண்ணங்கள், அச்சுக்கலை அமைப்புகள் அல்லது ஒரு முழு பயன்பாடு அல்லது வலைத்தளத்தில் சீராக இருக்க வேண்டிய இடைவெளி அலகுகள் போன்ற உலகளவில் பயன்படுத்தப்படும் மதிப்புகளை வரையறுப்பதற்கான மிகவும் பொதுவான வழியாகும்.

உலகளாவிய வரம்புக்கான பயன்பாட்டு நிகழ்வுகள்:

• வடிவமைப்பு டோக்கன்கள்: எல்லா இடங்களிலும் பயன்படுத்தப்படும் பிராண்ட் வண்ணங்கள், அச்சுக்கலை அளவுகள், இடைவெளி அலகுகள் மற்றும் பிற வடிவமைப்பு கூறுகளின் சீரான தொகுப்பை வரையறுக்கவும். ஒரு உலகளாவிய பிராண்டிற்கு, இது எல்லா பிராந்தியங்களிலும் மொழிகளிலும் நிலைத்தன்மையை உறுதி செய்கிறது.
• தளவமைப்பு மாறிலிகள்: பயன்பாடு முழுவதும் சீரான நிலையான அகலங்கள், அதிகபட்ச அகலங்கள் அல்லது கட்ட இடைவெளி மதிப்புகளை வரையறுக்கவும்.
• உலகளாவிய கருப்பொருள்கள்: அடிப்படை கருப்பொருள் மதிப்புகளை (எ.கா., லைட் மோட் வண்ணங்கள்) நிறுவவும், அவை பின்னர் குறிப்பிட்ட கருப்பொருள்களால் மேலெழுதப்படலாம்.

உள்ளூர் வரம்பு

CSS மாறிகளை ஒரு கிளாஸ், ஐடி அல்லது உறுப்பு போன்ற குறிப்பிட்ட தேர்வுகளுக்குள்ளும் வரையறுக்கலாம். உள்நாட்டில் வரையறுக்கப்படும் போது, மாறியின் வரம்பு அந்த தேர்வி மற்றும் அதன் சந்ததியினருக்கு மட்டுமே வரையறுக்கப்பட்டுள்ளது. இது மேலும் குறிப்பிட்ட தனிப்பயனாக்கம் மற்றும் மேலெழுதல்களை அனுமதிக்கிறது.

            
:root {
  --text-color: #333;
}

.dark-theme {
  --text-color: #eee;
  --background-color: #333;
}

.header {
  background-color: var(--background-color, #fff);
  color: var(--text-color);
}

.footer {
  background-color: var(--background-color, #f8f9fa);
  color: var(--text-color);
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில்:

• --text-color ஆரம்பத்தில் உலகளவில் #333 என அமைக்கப்பட்டுள்ளது.
• .dark-theme கிளாஸிற்குள், --text-color ஆனது #eee என மேலெழுதப்பட்டுள்ளது, மற்றும் ஒரு புதிய மாறி --background-color வரையறுக்கப்பட்டுள்ளது.
• .header மற்றும் .footer கூறுகள் அவற்றின் பெற்றோர் வரம்பிலிருந்து --text-color ஐப் பெறும். .header அல்லது .footer இன் பெற்றோருக்கு .dark-theme கிளாஸ் பயன்படுத்தப்பட்டால், அவை மேலெழுதப்பட்ட --text-color மதிப்பைப் பயன்படுத்தும்.
• .header உலகளவில் வரையறுக்கப்பட்ட --background-color ஐப் பயன்படுத்துகிறது, அதேசமயம் .footer ஆனது --background-color அமைக்கப்படவில்லை என்றால் அதன் சொந்த பின்னடைவைப் பயன்படுத்துகிறது.

முழு ஆவணத்தையும் பாதிக்காமல் ஒரு வலைப்பக்கத்தின் பகுதிகளுக்கு கூறுகளின் மாறுபாடுகளை உருவாக்குவதற்கோ அல்லது குறிப்பிட்ட கருப்பொருள்களைப் பயன்படுத்துவதற்கோ இந்த படிநிலை வரம்பு சக்தி வாய்ந்தது. ஒரு சர்வதேச வலைத்தளத்திற்கு, இது உள்ளூர்மயமாக்கப்பட்ட உள்ளடக்கப் பகுதிகளுக்கு அல்லது குறிப்பிட்ட பயனர் விருப்பங்களுக்கு வெவ்வேறு காட்சி பாணிகளைப் பயன்படுத்துவதைக் குறிக்கலாம்.

மரபுரிமை மற்றும் காஸ்கேட்

CSS மாறிகள் வேறு எந்த CSS பண்பையும் போலவே காஸ்கேடில் பங்கேற்கின்றன. இதன் பொருள், ஒரு குறிப்பிட்ட தேர்வியில் வரையறுக்கப்பட்ட ஒரு மாறி, குறைவான குறிப்பிட்ட தேர்வியில் வரையறுக்கப்பட்ட அதே பெயரைக் கொண்ட ஒரு மாறியை மேலெழுதுகிறது. தற்போதைய வரம்பில் ஒரு மாறி காணப்படவில்லை என்றால், உலாவி அதை பெற்றோர் உறுப்பின் வரம்பில் தேடுகிறது, மேலும் இது :root உறுப்பு வரை தொடர்கிறது.

இந்த சூழ்நிலையைக் கவனியுங்கள்:

            
:root {
  --button-bg: blue;
}

.container {
  --button-bg: green;
}

.button {
  background-color: var(--button-bg);
}

            

              
                Copy
              
            
          

.button கிளாஸைக் கொண்ட ஒரு உறுப்பு, அது .container கிளாஸைக் கொண்ட ஒரு உறுப்பின் சந்ததியாகவும் இருந்தால், அதற்கு பச்சை பின்னணி இருக்கும், ஏனெனில் .container இன் --button-bg வரையறை உலகளாவிய வரையறையை மேலெழுதுகிறது.

உலகளாவிய வலை வடிவமைப்பிற்கான நடைமுறை பயன்பாடுகள்

CSS மாறிகளின் நன்மைகள் சர்வதேச நோக்கத்துடன் கூடிய திட்டங்களுக்குப் பயன்படுத்தப்படும்போது பெருக்கப்படுகின்றன. அவை பல்வேறு கலாச்சார சூழல்கள் மற்றும் தொழில்நுட்ப சூழல்களில் வடிவமைப்பு நிலைத்தன்மையையும் மாற்றியமைக்கும் தன்மையையும் நிர்வகிக்க ஒரு வலுவான கட்டமைப்பை வழங்குகின்றன.

1. கருப்பொருள் மற்றும் சர்வதேசமயமாக்கல் (i18n)

CSS மாறிகள் டார்க் மோட்கள், உயர்-மாறுபட்ட முறைகள், அல்லது பிராண்ட்-குறிப்பிட்ட வண்ணத் தட்டுகளை உள்ளடக்கிய கருப்பொருள்களை செயல்படுத்துவதற்கு ஏற்றவை. சர்வதேச வலைத்தளங்களுக்கு, இது பிராந்தியம் அல்லது மொழியை அடிப்படையாகக் கொண்டு காட்சி பாணிகளை மாற்றியமைப்பது வரை நீண்டுள்ளது, ஒருவேளை வெவ்வேறு பிராந்தியங்களில் கலாச்சார விருப்பத்தேர்வுகள் அல்லது அணுகல் தரங்களுடன் ஒத்துப்போக வண்ணத் தட்டுகளை நுட்பமாக சரிசெய்வது.

எடுத்துக்காட்டு: பிராந்திய வண்ணத் தட்டுகள்

ஒரு உலகளாவிய இ-காமர்ஸ் தளத்தை கற்பனை செய்து பாருங்கள். வெவ்வேறு பிராந்தியங்களில் சற்று மாறுபட்ட பிராண்ட் வழிகாட்டுதல்கள் அல்லது வண்ண உணர்திறன்கள் இருக்கலாம். இந்த மாறுபாடுகளை நிர்வகிக்க நீங்கள் CSS மாறிகளைப் பயன்படுத்தலாம்:

            
:root {
  --brand-primary: #E60021; /* Global primary color */
  --button-text-color: #FFFFFF;
}

/* For a region where lighter colors are preferred */
.region-asia {
  --brand-primary: #FF4500;
  --button-text-color: #000000;
}

/* For a region with strict accessibility contrast requirements */
.region-europe {
  --brand-primary: #005A9C;
  --button-text-color: #FFFFFF;
}

.promo-banner {
  background-color: var(--brand-primary);
  color: var(--button-text-color);
}

            

              
                Copy
              
            
          

.region-asia அல்லது .region-europe போன்ற ஒரு கிளாஸை body அல்லது ஒரு பிரதான கொள்கலனுக்குப் பயன்படுத்துவதன் மூலம், அந்த பிராந்தியங்களில் உள்ள பயனர்களுக்கான கருப்பொருளை நீங்கள் மாறும் வகையில் மாற்றலாம், இது கலாச்சார பொருத்தத்தையும் உள்ளூர் தரங்களுக்கான இணக்கத்தையும் உறுதி செய்கிறது.

2. வடிவமைப்பு அமைப்புகள் மற்றும் கூறு நூலகங்கள்

பல அணிகள் மற்றும் தயாரிப்புகளுக்கு உலகளவில் சேவை செய்யும் பெரிய அளவிலான திட்டங்கள் அல்லது வடிவமைப்பு அமைப்புகளுக்கு, நிலைத்தன்மையைப் பராமரிக்க CSS மாறிகள் அவசியமானவை. அவை வடிவமைப்பு டோக்கன்களுக்கான முதுகெலும்பாக செயல்படுகின்றன, பொத்தான்கள், கார்டுகள், அல்லது படிவ உள்ளீடுகள் போன்ற கூறுகள் எங்கு செயல்படுத்தப்பட்டாலும் ஒரே மாதிரியாக தோற்றமளிப்பதையும் செயல்படுவதையும் உறுதி செய்கின்றன.

எடுத்துக்காட்டு: சீரான பொத்தான் பாணிகள்

            
:root {
  --button-padding: 0.75rem 1.5rem;
  --button-border-radius: 0.25rem;
  --button-font-size: 1rem;
  --button-primary-bg: #007bff;
  --button-primary-text: #fff;
  --button-secondary-bg: #6c757d;
  --button-secondary-text: #fff;
}

.btn {
  display: inline-block;
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
  font-size: var(--button-font-size);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border: none;
}

.btn-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.btn-secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

/* Overriding for a specific product or theme */
.product-x {
  --button-primary-bg: #FFD700;
  --button-primary-text: #333;
  --button-border-radius: 0.5rem;
}

            

              
                Copy
              
            
          

இந்த அமைப்புடன், .btn கிளாஸ்களைப் பயன்படுத்தும் எந்தவொரு கூறும் வரையறுக்கப்பட்ட தரங்களுக்கு இணங்கும். ஒரு குறிப்பிட்ட தயாரிப்பு அல்லது வலைத்தளத்தின் ஒரு குறிப்பிட்ட பகுதிக்கு வேறுபட்ட தோற்றம் தேவைப்பட்டால், நீங்கள் மாறிகளை உள்நாட்டில் மேலெழுதலாம், இது முக்கிய வடிவமைப்பு அமைப்பு அப்படியே இருப்பதை உறுதிசெய்து, தேவையான மாறுபாடுகளுக்கு அனுமதிக்கிறது.

3. பதிலளிக்கக்கூடிய வடிவமைப்பு மற்றும் மாற்றியமைத்தல்

மீடியா குவரிகள் பதிலளிக்கக்கூடிய வடிவமைப்பிற்கான முதன்மை கருவியாக இருந்தாலும், CSS மாறிகள் திரை அளவு அல்லது பிற நிபந்தனைகளின் அடிப்படையில் மதிப்புகளை மாறும் வகையில் சரிசெய்ய அனுமதிப்பதன் மூலம் அவற்றை பூர்த்தி செய்ய முடியும். இது மேலும் திரவமான மற்றும் அதிநவீன பதிலளிக்கக்கூடிய நடத்தைகளுக்கு வழிவகுக்கும்.

            
:root {
  --container-max-width: 1200px;
  --gutter-width: 2rem;
}

@media (max-width: 992px) {
  :root {
    --container-max-width: 960px;
    --gutter-width: 1.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --container-max-width: 720px;
    --gutter-width: 1rem;
  }
}

.container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-width);
  padding-right: var(--gutter-width);
}

            

              
                Copy
              
            
          

இந்த அணுகுமுறை பதிலளிக்கக்கூடிய மதிப்பு நிர்வாகத்தை மையப்படுத்துகிறது. பல மீடியா குவரிகளுக்குள் மதிப்புகளை மீண்டும் மீண்டும் செய்வதற்கு பதிலாக, நீங்கள் மாறிகளை ஒரே இடத்தில் புதுப்பிக்கிறீர்கள், மேலும் அந்த மாறிகளைப் பயன்படுத்தும் அனைத்து கூறுகளும் தானாகவே மாற்றியமைக்கப்படுகின்றன. இது உலகளாவிய பயன்பாடுகளுக்கு முக்கியமானது, அங்கு தளவமைப்புகள் பல்வேறு சந்தைகளில் பொதுவான பரந்த அளவிலான திரை அளவுகள் மற்றும் சாதன வகைகளுக்கு சரிசெய்யப்பட வேண்டியிருக்கும்.

4. மாறும் கணக்கீடுகள்

CSS மாறிகளை calc() போன்ற CSS செயல்பாடுகளுக்குள் பயன்படுத்தலாம், இது மாறும் மற்றும் துல்லியமான கணக்கீடுகளை அனுமதிக்கிறது. இது நெகிழ்வான தளவமைப்புகளை உருவாக்குவதற்கோ அல்லது பிற மாறிகள் அல்லது வ்யூபோர்ட் பரிமாணங்களின் அடிப்படையில் உறுப்பு அளவுகளை சரிசெய்வதற்கோ மிகவும் பயனுள்ளதாக இருக்கும்.

            
:root {
  --header-height: 60px;
  --footer-height: 40px;
}

.main-content {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
  padding-top: var(--header-height);
  margin-bottom: var(--footer-height);
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், பிரதான உள்ளடக்கப் பகுதியின் min-height, ஹெடர் மற்றும் ஃபூட்டருக்கு இடையில் மீதமுள்ள செங்குத்து இடத்தைப் நிரப்ப கணக்கிடப்படுகிறது. இது பல வலை பயன்பாடுகளில் ஒரு பொதுவான தேவையாக இருக்கும் ஹெடர் மற்றும் ஃபூட்டரின் நிலையான உயரங்களைப் பொருட்படுத்தாமல் தளவமைப்பு சரியாக மாற்றியமைக்கப்படுவதை உறுதி செய்கிறது.

ஜாவாஸ்கிரிப்ட்டுடன் தொடர்புகொள்வது

CSS மாறிகளின் மிகவும் சக்திவாய்ந்த அம்சங்களில் ஒன்று ஜாவாஸ்கிரிப்ட் வழியாக மாறும் வகையில் கையாளப்படும் அவற்றின் திறன் ஆகும். இது ஊடாடும் அனுபவங்கள், நிகழ்நேர கருப்பொருள், மற்றும் சிக்கலான UI நடத்தைகளுக்கான சாத்தியக்கூறுகளின் உலகத்தைத் திறக்கிறது.

நீங்கள் ஒரு உறுப்பின் ஸ்டைல் ஆப்ஜெக்டில் getPropertyValue() மற்றும் setProperty() முறைகளைப் பயன்படுத்தி CSS மாறிகளைப் பெறலாம் மற்றும் அமைக்கலாம்.

            
// Get the root element
const root = document.documentElement;

// Get a CSS Variable value
const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color');
console.log('Primary Color:', primaryColor);

// Set a CSS Variable value
root.style.setProperty('--primary-color', '#FF5733');

            

              
                Copy
              
            
          

இந்த திறன் மாறும் டாஷ்போர்டுகள், பயனர் கட்டமைக்கக்கூடிய இடைமுகங்கள், அல்லது பயனர் தொடர்புகளின் அடிப்படையில் பாணிகளை மாற்றியமைப்பதற்கு விலைமதிப்பற்றது. ஒரு சர்வதேச பார்வையாளர்களுக்கு, இது பயனர்கள் தங்களுக்கு விருப்பமான வண்ணத் திட்டங்களைத் தேர்ந்தெடுக்க அனுமதிப்பதையோ அல்லது நிலையான CSS ஆல் கையாளப்படாத கண்டறியப்பட்ட பிராந்திய விருப்பங்களின் அடிப்படையில் UI கூறுகளை சரிசெய்வதையோ குறிக்கலாம்.

உலாவி ஆதரவு மற்றும் பரிசீலனைகள்

CSS தனிப்பயன் பண்புகள் அனைத்து நவீன உலாவிகளிலும் சிறந்த உலாவி ஆதரவைக் கொண்டுள்ளன. இருப்பினும், எந்தவொரு வலை தொழில்நுட்பத்தையும் போலவே, பழைய உலாவி வரம்புகளைப் பற்றி அறிந்திருப்பது ஒரு நல்ல நடைமுறையாகும்.

• நவீன உலாவிகள்: Chrome, Firefox, Safari, Edge, மற்றும் Opera அனைத்தும் CSS மாறிகளுக்கு வலுவான ஆதரவை வழங்குகின்றன.
• Internet Explorer: IE11 மற்றும் அதற்கு முந்தையவை CSS மாறிகளை ஆதரிக்காது. IE11 ஆதரவு ஒரு கடுமையான தேவை என்றால், நீங்கள் ஒரு பின்னடைவு உத்தியைப் பயன்படுத்த வேண்டும். இது பெரும்பாலும் மாறிகள் இல்லாமல் ஸ்டைல்களை நகலெடுப்பது அல்லது ஒரு CSS முன்செயலியைப் (Sass அல்லது Less போன்றவை) பயன்படுத்தி முன்னொட்டு இல்லாத பண்புகளுக்கு தொகுப்பது ஆகியவற்றை உள்ளடக்கியது, இருப்பினும் இது மாறும் ஜாவாஸ்கிரிப்ட் திறன்களை இழக்கிறது.

IE11 க்கான பின்னடைவு உத்திகள்:

1. ஸ்டைல்களை நகலெடுக்கவும்: CSS மாறிகளுடன் மற்றும் இல்லாமல் ஸ்டைல்களை வரையறுக்கவும். மாறிகள் இல்லாத ஸ்டைல்கள் IE11 ஆல் பயன்படுத்தப்படும், அதேசமயம் நவீன உலாவிகள் மாறி அடிப்படையிலான ஸ்டைல்களைப் பயன்படுத்தும். இது தேவையற்ற குறியீட்டிற்கு வழிவகுக்கும்.

               
     :root {
       --primary-color: #007bff;
     }
   
     .button {
       background-color: #007bff; /* Fallback for IE */
       background-color: var(--primary-color);
     }
     
               
   
                 
                   Copy
                 
               
             

2. CSS முன்செயலிகள்: மாறிகளை வரையறுத்து அவற்றை தொகுக்க Sass/Less ஐப் பயன்படுத்தவும். இது ஒரு பொதுவான அணுகுமுறை ஆனால் ஜாவாஸ்கிரிப்ட் தொடர்பு மூலம் வழங்கப்படும் இயக்க நேர மாறும் திறன்களை நீங்கள் இழக்கிறீர்கள் என்று அர்த்தம்.
3. பாலிஃபில்கள்: பரவலான நேட்டிவ் ஆதரவு காரணமாக இப்போது குறைவாகப் பொதுவானதாக இருந்தாலும், பழைய உலாவிகளில் அம்சங்களுக்கான ஆதரவைச் சேர்க்க பாலிஃபில்கள் பயன்படுத்தப்படலாம். இருப்பினும், CSS மாறிகளுக்கு, நேட்டிவ் ஆதரவின் நன்மைகள் பெரும்பாலும் பாலிஃபில்களின் சிக்கலை விட அதிகமாக இருக்கும்.

பெரும்பாலான உலகளாவிய திட்டங்களுக்கு, நவீன வலை பயனர்களை குறிவைக்கும், CSS மாறிகளுக்கான IE11 ஆதரவின் பற்றாக்குறை பெரும்பாலும் ஒரு ஏற்றுக்கொள்ளக்கூடிய வர்த்தகமாகும், இது தூய்மையான, மேலும் சக்திவாய்ந்த ஸ்டைல்ஷீட்களை அனுமதிக்கிறது.

CSS மாறிகளைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

CSS மாறிகளை திறம்பட பயன்படுத்த, இந்த சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

• பெயரிடும் மரபுகள்: உங்கள் மாறிகளுக்கு தெளிவான, விளக்கமான பெயர்களைப் பயன்படுத்தவும். இரட்டை ஹைபன்களுடன் (--) முன்னொட்டு சேர்ப்பது நிலையானது. பெரிய திட்டங்களில் அமைப்பை மேம்படுத்த நேம்ஸ்பேஸ்களுக்கு முன்னொட்டுகளைக் கவனியுங்கள் (எ.கா., --theme-color-primary, --layout-spacing-medium).
• உலகளாவிய மாறிகளை மையப்படுத்தவும்: எளிதான அணுகல் மற்றும் நிர்வாகத்திற்காக :root இல் பொதுவான மாறிகளை வரையறுக்கவும்.
• வரையறுக்கப்பட்ட மேலெழுதல்கள்: உலகளாவிய மாறிகளை தேவையற்ற முறையில் மறுவரையறை செய்வதற்கு பதிலாக, குறிப்பிட்ட கூறுகள் அல்லது பிரிவுகளுக்கான மாறிகளை மேலெழுத உள்ளூர் வரம்பைப் பயன்படுத்தவும்.
• பின்னடைவுகளைப் பயன்படுத்துங்கள்: சீரான சீரழிவை உறுதி செய்யவும் மற்றும் எதிர்பாராத ஸ்டைலிங் சிக்கல்களைத் தடுக்கவும் எப்போதும் பின்னடைவு மதிப்புகளை வழங்கவும்.
• உங்கள் மாறிகளை ஆவணப்படுத்தவும்: உங்கள் CSS மாறிகளுக்கான தெளிவான ஆவணங்களை பராமரிக்கவும், குறிப்பாக ஒரு வடிவமைப்பு அமைப்பில், டெவலப்பர்களுக்கு அவற்றின் பயன்பாடு மற்றும் நோக்கம் குறித்து வழிகாட்டவும். இது புவியியல் ரீதியாக பரவலாக உள்ள பெரிய அணிகளுக்கு முக்கியமானது.
• அதிகப்படியான சிக்கலைத் தவிர்க்கவும்: சக்திவாய்ந்ததாக இருந்தாலும், மாறிகளை அதிகமாகப் பயன்படுத்த வேண்டாம், அவை CSS ஐ இல்லாமல் படிப்பதை விட கடினமாக்குகின்றன. உண்மையான மறுபயன்பாடு மற்றும் பராமரிப்புத்திறன் நன்மைகளுக்காக அவற்றைப் பயன்படுத்தவும்.
• calc() உடன் இணைக்கவும்: நெகிழ்வான அளவு, இடைவெளி, மற்றும் நிலைப்படுத்தலுக்கு மாறிகளுடன் calc() ஐப் பயன்படுத்தவும்.

முடிவுரை

CSS மாறிகள் (தனிப்பயன் பண்புகள்) CSS இல் ஒரு அடிப்படை முன்னேற்றமாகும், இது வலை மேம்பாட்டிற்கு இணையற்ற நெகிழ்வுத்தன்மையையும் கட்டுப்பாட்டையும் வழங்குகிறது. மீண்டும் பயன்படுத்தக்கூடிய மதிப்புகளை வரையறுக்கவும், வரம்பை திறம்பட நிர்வகிக்கவும், மற்றும் ஜாவாஸ்கிரிப்ட்டுடன் மாறும் வகையில் தொடர்பு கொள்ளவும் அவற்றின் திறன் அவற்றை நவீன, பராமரிக்கக்கூடிய, மற்றும் மாற்றியமைக்கக்கூடிய வலை அனுபவங்களை உருவாக்குவதற்கு இன்றியமையாததாக ஆக்குகிறது. உலகளாவிய வலை வடிவமைப்பிற்கு, CSS மாறிகள் டெவலப்பர்களுக்கு சீரான, கருப்பொருள் கொண்ட, மற்றும் கலாச்சார ரீதியாக பொருத்தமான பயனர் இடைமுகங்களை உருவாக்க அதிகாரம் அளிக்கின்றன, அவை உலகெங்கிலும் உள்ள பல்வேறு தேவைகள் மற்றும் பயனர் விருப்பங்களுக்கு எளிதில் மாற்றியமைக்க முடியும். அவற்றின் வரையறை மற்றும் வரம்பில் தேர்ச்சி பெறுவதன் மூலம், உங்கள் முன்முனை திட்டங்களின் செயல்திறன் மற்றும் அளவிடுதலை நீங்கள் கணிசமாக மேம்படுத்தலாம்.